<? $this->layoutScript('/js/ckeditor/ckeditor.js') ?>
<? $this->layoutScript('/js/ckeditor/adapters/jquery.js') ?>

<menu class="left">
    <? foreach ($pages as $item): ?>
    <li class="page-item" value="<?= $item['id'] ?>"><span class="handle">&nbsp;</span><a href="/admin_pages/edit/<?= $item['id']?>"><?= $item['title'] ?></a></li>
    <? endforeach ?>
    <li class="util new"><a href="/admin_pages/create">Нова страница</a></li>
    <li class="util basket">Обриши</li>
    <li class="util order"><a href="javascript:;" onclick="savePageOrder()">Сачувај нови редослед</a></li>
</menu>
<? if (isset($page)): ?>
<form action="/admin_pages/save" method="post" class="clear">
    <input type="hidden" name="data[id]" value="<?= $page['id'] ?>">

    <p><label for="dataTitle">Наслов:</label>
    <input type="text" id="dataTitle" name="data[title]" value="<?= $page['title'] ?>"></p>

    <p><label for="dataBackground">Позадина:</label>
    <select name="data[background]" id="dataBackground" size="5" style="width:200px" onchange="backgroundPreview(this)">
        <option value="">---</option>
        <? foreach ($backgrounds as $bg): ?>
        <option<? if ($page['background']==$bg): ?> selected="selected"<? endif ?>><?= $bg ?></option>
        <? endforeach ?>
    </select>
    <span id="background-preview"><? if(!empty($page['background'])): ?>
        <?= $this->helpHtml->image('background/' . $page['background'], array(
            'height' => 70
        )) ?>
    <? endif ?></span></p>

    <p><label for="dataContent">Сарджај:</label>
    <textarea id="dataContent" name="data[content]"><?= $page['content'] ?></textarea></p>

    <? if ($page['id']): ?>
        <input type="button" class="delete" onclick="if(confirm('Желите да обришете страницу?\nКликните на ОК за потврду.')){location.href='/admin_pages/delete/<?= $page['id'] ?>'}" value="Обриши страницу">
    <? endif ?>
    <input type="submit" value="Сачувај">
</form>
<? endif ?>


<script type="text/javascript">
$(function(){
    $('#dataContent').ckeditor();
    $('#main menu').sortable({
        items: '>li:not(.util)',
        revert: 'invalid',
        handle: '.handle',
        placeholder: 'ui-sortable-placeholder',
        forcePlaceholderSize: true,
        change: function(e, ui) {
            $(e.target).addClass('reordered');
        },
        start: function(e, ui) {
            $('#main menu > .util.basket').show();
        },
        stop: function(e, ui) {
            $('#main menu > .util.basket').hide();
        }
    }).disableSelection();
    $('#main menu > .util.basket').droppable({
        hoverClass: 'ui-droppable-hover',
        accept: '.page-item',
        drop: function(e, ui) {
            var basket = $(e.target);
            var li = ui.draggable;
            var menu = li.parent();
            
            menu
                .sortable('option', 'revert', false)
                .removeClass('reordered');
            li.hide();

            var id = ui.draggable.attr('value');
            $.ajax({
                url: '/admin_pages/delete/' + id,
                beforeSend: function() {
                    basket.addClass('loading');
                },
                complete: function(req) {
                    basket.removeClass('loading');
                    if (req.status == 200) {
                        location.reload();
                    } else {
                        li.show();
                        alert(req.statusText);
                    }
                }
            });
        }
    });
});

function savePageOrder() {
    var menu = $('#main menu');
    var data = [];
    menu.children('li:not(.util)').each(function(index){
        data.push("data["+this.value+"]="+index);
    });
    
    location.href = '/admin_pages/order/?' + data.join("&");
}
function backgroundPreview(sel) {
    var image = sel.value;
    var preview = $('#background-preview');
    if (image) {
        var img = preview.children('img');
        if (!img.length) {
            img = $('<img height="70">').appendTo(preview);
        }
        img.attr('src', '/img/background/' + image + '?h=70');
        console.log(img);
    } else {
        preview.html('')
    }
}
</script>